<template>
  <vue-context-menu :contextMenuData="contextMenuData"
                    @open="handleClick('open')"
                    @share="handleClick('share')"
                    @copyLink="handleClick('copyLink')"
                    @copy="handleClick('copy')"
                    @move="handleClick('move')"
                    @delete="handleClick('delete')"
                    @rename="handleClick('rename')"
                    @detail="handleClick('detail')">
  </vue-context-menu>
</template>
<script>

export default {
  data() {
    return {
      coordinate: {
        x: '',
        y: '',
      },
      copyStore: [],
      defaultlists: [
        {
          fnHandler: 'open', // 事件
          // icoName: 'el-icon-sort',  // icon
          btnName: this.$t('open'), // 事件名称
        },
        {
          fnHandler: 'share',
          btnName: this.$t('share'),
        },
        {
          fnHandler: 'copyLink',
          btnName: this.$t('copy link'),
        },
        {
          fnHandler: 'copy',
          btnName: this.$t('copy'),
        },
        {
          fnHandler: 'move',
          btnName: this.$t('move'),
        },
        {
          fnHandler: 'delete',
          btnName: this.$t('delete'),
        },
        {
          fnHandler: 'rename',
          btnName: this.$t('rename'),
        },
        {
          fnHandler: 'detail',
          btnName: this.$t('detail'),
        },
      ],
    };
  },
  props: {
    // file: {
    //   type: Object,
    //   default: () => ({}),
    // },
  },
  computed: {
    contextMenuData() {
      return {
        menuName: 'contextFileMenu',
        axis: {
          x: this.coordinate.x,
          y: this.coordinate.y,
        },
        // 菜单选项
        menulists: this.defaultlists,
      };
    },
  },

  mounted() {
    this.hideMenu();
  },
  methods: {
    setCurrentSort(name, order) {
      this.currentSort.name = name;
      this.currentSort.order = order;
    },
    showMenu(event, item, index) {
      event.preventDefault();
      const x = event.clientX;
      const y = event.clientY;
      this.coordinate = { x, y };
      this.currentItem = item;
      this.currentIndex = index;
    },
    hideMenu() {
      setTimeout(() => {
        const menuName = `vue-contextmenuName-${this.contextMenuData.menuName}`;
        const menu = document.getElementsByClassName(menuName)[0];
        menu.style.display = 'none';
      }, 0);
    },
    //! 将元素的路径传递过来
    handleClick(val) {
      switch (val) {
        case 'delete':
          this.deleteHandle();
          break;
        default:
          break;
      }
    },
    deleteHandle() {
      this.$confirm(this.$t('sure delete'), this.$t('delete remind'), {
        confirmButtonText: this.$t('sure'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning',
      }).then(() => {
        this.$emit('change', 'delete');
      }).catch(() => {});
    },
    // deleteHandle() {
    //   this.$confirm(this.$t('whether to confirm deletion'), this.$t('remind'), {
    //     confirmButtonText: this.$t('sure'),
    //     cancelButtonText: this.$t('cancel'),
    //     type: 'warning'
    //   }).then(() => {
    //     this.$set(this.currentItem, 'delete', true);
    //   })
    // },
  },
};
</script>
<style>
</style>
